<template>
	<el-dialog title="手写签字" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
		<el-main class="nopadding">
			<vue-esign ref="esign" :width="width" :height="height" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor="bgColor"/>
		</el-main>
		<template #footer>
			<el-button @click="visible=false">取 消</el-button>
			<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script>
import vueEsign from 'vue-esign'
export default {
	props: {
	},
	components: {
		vueEsign
	},
	emits: ['success', 'closed'],
	data() {
		return {
			height:0,
			width:460,
			lineWidth: 6,
			lineColor: '#000000',
			bgColor: '#eeeeee',
			resultImg: '',
			isCrop: false,
			visible: false,
			isSaveing: false,
			//表单数据
			form: {},
		}
	},
	mounted() {
	},
	methods: {
		open() {
			this.visible = true;
			return this
		},
		//表单提交方法
		submit() {
			this.$refs['esign'].generate().then(res => {
				this.resultImg = res // 得到了签字生成的base64图片
				this.$emit('success',this.resultImg);
				this.visible = false;
			}).catch(err => { //  没有签名，点击生成图片时调用
				this.$message({
					message: err + ' 未签名！',
					type: 'warning'
				})
			})
		},
		setData(data) {
			this.height = (data.height/data.width)*this.width;
		},
	}
}
</script>

<style>
</style>
